<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品列表</title>
	<link rel="stylesheet" href="__PUBLIC__/Home/Css/header.css">
	<link rel="stylesheet" href="__PUBLIC__/Home/Css/goodslist.css">
	<link rel="stylesheet" href="__PUBLIC__/Home/Css/goodsDetail.css">
	<link rel="stylesheet" href="__PUBLIC__/Home/Css/footer.css">
	<script src="__PUBLIC__/Home/Js/jquery.js"></script>
	<script src="__PUBLIC__/Home/Js/GetRequest.js"></script>
	<script src="__PUBLIC__/Home/Js/getDate.js"></script>
</head>
<body>
	<!-- 载入头文件 -->
	<include file="Header/index" />

	<!-- main部分 -->
	<div id="goods_content">
		<!-- 频道导航 -->
		<div id="main_minNav">
			<h1>
				<a class="track">{$category['name']}频道</a>
			</h1>
			<div class="navList">
				<ul>
					<foreach name="datas" item="datas">
						<li>
							<a class="dataname" href="__CONTROLLER__/getDefault.html?id={$datas.id}">{$datas.listName}</a>
						</li>
					</foreach>
				</ul>
			</div>
		</div>

		<!-- 左边列表部分 -->
		<div id="goods_leftList">
			<!-- 商品筛选盒子 -->
			<!-- <div class="left_filtrateBox">
				<div class="filtrate_Category">
					<h2>
						<a href="javascript:">重置筛选项</a>
						<span>衬衫</span>
					</h2>

					<dl>
						<dt>品牌</dt>
						<dd>
							<a href="javascript:">vancl 凡客诚品</a>
						</dd>
					</dl>


					<dl>
						<dt>风格</dt>
						<dd>
							<a href="javascript:">日系</a>
						</dd>
						<dd>
							<a href="javascript:">韩系</a>
						</dd>
						<dd>
							<a href="javascript:">时尚</a>
						</dd>
						<dd>
							<a href="javascript:">OL</a>
						</dd>
					</dl>

					<dl>
						<dt>版型</dt>
						<dd>
							<a href="javascript:">修身</a>
						</dd>
						<dd>
							<a href="javascript:">标准</a>
						</dd>
					</dl>

					频道搜索
					<div class="list_search">
						<input type="text" value="频道内搜索">
						<input type="button">
					</div>
				</div>
			</div> -->

			<div class="left_order">
				<div class="list_title">
					<h2>
						<span>销量排行</span>
					</h2>
				</div>

				<div class="list_detail">
					<div>
						<foreach name="sales" item="sales" key="k">
							<span class="blank"></span>
							<ul title="{$sales['goodsname']}">
								<li class="topImgs">
									<a href="__APP__/Home/Detial/Detial/id/{$sales.id}">
										<img src="__PUBLIC__/Home/Images/goods/{$sales.goodsimg}" alt="">
									</a>
								</li>
								<li class="topWord">
									<p>
										<span>{$k+1}</span>
									</p>
									<p class="list_name">
										<a href="__APP__/Home/Detial/Detial/id/{$sales.id}">{$sales['goodsname']}</a>
									</p>
									<span class="blank"></span>
									<p class="Sprice">售价：￥{$sales.promoteprice}</p>
								</li>
							</ul>
						</foreach>
					</div>
				</div>
			</div>


			
			<div class="left_order">
				<div class="list_title">
					<h2>
						<span>您可能感兴趣的商品</span>
					</h2>
				</div>

				<div class="list_detail">
					<div>
						<foreach name="like" item="like" key="k">
							<span class="blank"></span>
							<ul>
								<li class="topImgs">
									<a href="__APP__/Home/Detial/Detial/id/{$like.id}">
										<img src="__PUBLIC__/Home/Images/goods/{$like.goodsimg}" alt="">
									</a>
								</li>
								<li class="topWord">
									<p>
										<span>{$k+1}</span>
									</p>
									<p class="list_name">
										<a href="__APP__/Home/Detial/Detial/id/{$like.id}">{$like.goodsname}</a>
									</p>
									<span class="blank"></span>
									<p class="Sprice">售价：￥{$like.promoteprice}</p>
								</li>
							</ul>
						</foreach>
					</div>
				</div>
			</div>

			<!-- <div class="left_order">
				<div class="list_title">
					<h2>
						<span>最近浏览过的商品</span>
					</h2>
				</div>

				<div class="list_detail">
					<div>
						<for start="0" end="5" step="1">
							<span class="blank"></span>
							<ul>
								<li class="topImgs">
									<a href="javascript:">
										<img src="__PUBLIC__/Home/Images/0538827-1j201307051156146001.jpg" alt="">
									</a>
								</li>
								<li class="topWord">
									<p>
										<span>1</span>
									</p>
									<p class="list_name">
										<a href="javascript:">[VT]基础素色背心(女款..</a>
									</p>
									<span class="blank"></span>
									<p class="Sprice">售价：￥9</p>
								</li>
							</ul>
						</for>
					</div>
				</div>
			</div> -->

		</div>

		<!-- 右边商品部分 -->
		<div id="goods_rightList">
			<!-- 工具栏部分 -->
			<div id="toolbar">
				<!-- 浮动div -->
				<div id="floatDiv" style="background-color: rgb(255, 255, 255); z-index: 100; position: static; top: 0px;">
					<div id="filterBox">
						<div id="filter_top">
							<div id="filter_top_left">
								<h3>排序：</h3>
								<div id="filter_order">
									<a class="getDefault" href="__CONTROLLER__/getDefault.html?id={$where['cid']}" class="checked">默认</a>
									<a class="getSales" href="__CONTROLLER__/getSales.html?id={$where['cid']}">销量</a>
									<a class="getPriceOrder" href="__CONTROLLER__/getPriceOrder.html?id={$where['cid']}">价格</a>
									<a class="getIsGood" href="__CONTROLLER__/getIsGood.html?id={$where['cid']}">好评</a>
									<a class="getNew" href="__CONTROLLER__/getNew.html?id={$where['cid']}">最新</a>
								</div>
							</div>
							<div id="filter_top_right">
								<div id="pageDiv">
									<span>相关商品<strong>{$page['count']}</strong>款</span>
									<span>
										<span href="javascript:" class="page_prev" onclick="page_prev();"></span>
									</span>
									<span>{$page['page']}/{$page['pagecount']}</span>
									<span>
										<span href="javascript:" class="page_next" onclick="page_next();"></span>
									</span>
								</div>
							</div>
						</div>

						<div id="filter_bottom">
							<div id="bottom_left">
								配送方式：
								<span>
									<label for="all"><input id="all" type="radio" name="radio" /> 全部</label>
								</span>
								<span>
									<label for="vancl"><input id="vancl" type="radio" name="radio" /> 凡客配送</label>
								</span>
								<span>
									<label for="disanf"><input id="disanf" type="radio" name="radio" /> 第三方配送</label>
								</span>
							</div>

							<div id="bottom_price">
								<h3>价格：</h3>
								<div id="price_input">
									<div id="price_search">
										<input type="text" title="按价格区间筛选 最低价" id="price_low">
										<span>—</span>
										<input type="text" title="按价格区间筛选 最高价" id="price_high">
									</div>
									<div id="price_foused">
										<p>
											<span class="searchbarBtnCommon">清空</span>
											<a class="searchbarBtnStrong"></a>
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 商品详细列表部分 -->
			<div id="productList">
				<ul id="listDetail">
					<if condition="$goods eq 'null'">
						<!-- 商品不存在 -->
						<div id="noresult">
							<p>抱歉！没有找到符合你要求的商品，</p>
							<p>
								您可以
								<span style="color:#a10000">改变或减少筛选条件</span>
								的限制试试。
							</p>
						</div>
					<else />
						<foreach name="goods" item="goods">
							<li>
								<strong>
									<a href="__APP__/Home/Detial/Detial/id/{$goods.id}">
										<img class="popup_detail" src="__PUBLIC__/Home/Images/goods/{$goods.goodsimg}" alt="{$goods.id}">
									</a>
								</strong>
								<p class="product_name">
									<a href="__APP__/Home/Detial/Detial/id/{$goods.id}">{$goods.goodsname}　{$goods.goodsColor}　{$goods.goodsdesc}</a>
								</p>
								<p class="product_price">
									<del>市场价 ￥{$goods.goodsprice}</del><br>
									<strong>售价 ￥{$goods.promoteprice}</strong>
								</p>
								<p class="storeinfo">
									<span></span>
									<a href="javascript:">VANCL 凡客诚品旗舰店</a>
								</p>
								<div></div>
							</li>
						</foreach>
					</if>
				</ul>
			</div>

		</div>

	</div>

	<div class="clears"></div>

	<!-- 底部分页菜单开始 -->
	<div id="page_box">
		<div id="bottom_page">
			<input type="button" id="page_Okbtn" />
			<strong>页</strong>
			<input type="text" id="page_text" value="1" />
			<strong>到第</strong>
			<em id="page_count">共{$page['pagecount']}页</em>
			<span id="page_next" onmouseout="$(this).css('background-position', '46px -1954px');" onmouseover="$(this).css('background-position', '46px -1976px');" style="background-position: 46px -1954px;" onclick="page_next();">
				<a>下一页</a>
			</span>
			<ul id="page_ul">
				
			</ul>
			<span id="page_prev" onmouseout="$(this).css('background-position', '3px -1996px');" onmouseover="$(this).css('background-position', '3px -2018px');" style="background-position: 3px -1996px;" onclick="page_prev();">
				<a>上一页</a>
			</span>
		</div>
	</div>
	<!-- 底部分页菜单结束 -->

	<div class="clears"></div>

	<!-- 载入商品详细页面 -->
	<include file="public/goodsDetail" />
	<!-- 载入脚文件 -->
	<include file="public/footer" />
</body>
<script>
	//根据接收到的总页数来动态添加分页按钮的数量
	var count = 0;
	//设置分页按钮的最大个数
	if({$page['pagecount']} >= 10 ){
		count = 10;
	}else{
		count = {$page['pagecount']};
	}
	var addLi = "";
	for(var i=1;i<=count;i++){
		if(i == {$page['page']}){
			addLi += "<li class=\"page_current\">"+i+"</li>";
		}else{
			addLi += "<li>"+i+"</li>";
		}
	}
	$("#page_ul").empty().append(addLi);

	//上一页
	function page_prev(){
		var urls = location.href;
		if(Request['page'] > 1){
			location.href = urls.replace(/&page={$page['page']}/,"&page="+(parseInt(Request['page']) - 1));
		}
	}

	// // 下一页
	function page_next(){
		var urls = location.href;
		if({$page['page']} == 1 && {$page['pagecount']} > 1){
			location.href = urls + "&page=2";
		}
		if(Request['page'] < {$page['pagecount']}){
			location.href = urls.replace(/&page={$page['page']}/,"&page="+({$page['page']} + 1));
		}
	}

	//单击页码
	$("#page_ul li").click(function(){
		var urls = location.href;
		if(Request['page'] == null){
			location.href = urls + "&page=" + $(this).html();
			return false;
		}

		if(Request['page'] != ""){
			location.href = urls.replace(/&page={$page['page']}/,"&page="+$(this).html());
		}
	});

	// 单击确定按钮跳转
	$("#page_Okbtn").click(function(){
		var urls = location.href;
		if(Request['page'] == null){
			location.href = urls+"&page="+$("#page_text").val();
			return false;
		}
		if($("#page_text").val() <= {$page['count']}){
			location.href = urls.replace(/&page={$page['page']}/,"&page="+$("#page_text").val());
		}
	});

	// 工具栏排序
	var p_url = "__ACTION__";
	var p_arr = p_url.split("/");
	$("." +p_arr.pop()).addClass("checked").siblings().removeClass("checked");

	// 工具栏定位
	$(window).scroll(function(){
		if($(document).scrollTop() > $("#filterBox").offset().top){
			$("#filterBox").css({"position":"fixed","top":"0"});
		}
		if($(document).scrollTop() < 255){
			$("#filterBox").css("position","relative");
		}
	});

	// 频道导航
	for(var i=0;i<$(".navList ul li").length;i++){
		$(".dataname")[i].index = i;
		if($(".dataname").eq(i).html() == "{$dataname.listName}"){
			$(".dataname").eq(i).parent().addClass("current");
		}
	}
	

	$(".navList ul li").click(function(){
		$(this).addClass("current").siblings().removeClass("current");
	});


	// 商品详情信息
	var popup_detail = $(".popup_detail");
	popup_detail.hover(function(event){
		var eve = event || window.event;
		$(this).css("border","1px solid #B33333");
		$("#arrowIcon").css("display","block");
		$("#popup").css("display","block");
		$("#arrowIcon").css("left",$(this).offset().left + $(this).width());
		$("#popup").css("left",$(this).offset().left + $(this).width() + $("#arrowIcon").width());
		$("#arrowIcon").css("top",eve.pageY);

		if(eve.pageY > $(this).offset().top + $(this).height() / 2){
			$("#arrowIcon").css("top",eve.pageY - 25)
		}

		var screenHeight = $(window).height();
		if(eve.clientY > screenHeight / 2){
			$("#popup").css("top",screenHeight - $("#popup").height() - 5);
		}else{
			$("#popup").css("top",(screenHeight / 10) - 60);
		}

		if($(this).offset().left > $(document).width() / 2){
			$("#arrowIcon").css({"background-position":"0 -28px","left":$(this).offset().left - $("#arrowIcon").width()});
			$("#popup").css("left",$(this).offset().left - $("#popup").width() - $("#arrowIcon").width()-1);
		}else{
			$("#arrowIcon").css("background-position","0 0");
		}


		// ajax请求数据
		$.get("__CONTROLLER__/getGoods",{"id":$(this).attr("alt")},function(data){
			$(".pop_pic").html('<img src="__PUBLIC__/Home/Images/goods/' + data.goodsimg + '">');
			$(".pop_title span").html(data.goodsname);
			$(".pop_title em").html("总销量："+data.goodssales);
			$(".isgood").html("好评：" + data.isGood);
			$(".ispoor").html("差评：" + data.isPoor);

			$(".market").html("上架时间："+getDate(data.addtime));
			$(".price1 strong").html("售价：￥"+data.promoteprice);
			$(".price2 del").html("￥"+data.goodsprice);
			var sum = (parseInt(data.isGood) + parseInt(data.isPoor));
			var result = Math.round(parseInt(data.isGood) / parseInt(sum) * 100) + "%";
			if(result == "NaN%"){
				result = "100%";
			}
			$(".pop_praise em").html(result);
		},"json");

	},function(){
		$(this).css("border","1px solid #DCDCDC");
		$("#pop_pic_detail").attr("src"," ");
		$("#arrowIcon").css("display","none");
		$("#popup").css("display","none");
	});

	// 价格查询
	// 清除按钮
	$(".searchbarBtnCommon").click(function(){
		$("#price_low,#price_high").val("");
	});
	//确定按钮
	$(".searchbarBtnStrong").click(function(){
		var url = "__CONTROLLER__/getPrice.html?id="+Request['id'];
		var low = "&low="+$("#price_low").val();
		var high = "&high="+$("#price_high").val();
		var t_low = $("#price_low").val();
		var t_high = $("#price_high").val();

		if(t_low && t_high != ""){
			location.href = url+ low+high;
		}else if(t_low != "" && t_high == ""){
			location.href = url+low;
		}else if(t_low == "" && t_high != ""){
			location.href = url+high;
		}else{
			alert("至少输入一个值");
		}
	});
</script>
</html>